<template>
	<view class="wrapper">
		<!-- <view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				<text>{{ item }}</text>
			</view>
		</view>
		 -->
		<view class="tab-head">
			<u-tabs  name="cate_name"
			:list="list" 
			:is-scroll="false"
			:current="current"
			 @change="change"
			 active-color="#f10000"
			 inactive-color="#333333"
			 ></u-tabs>
		</view>
		
		<view v-if="orderData" class="content">
			<view class="tab-cont">
				<view v-for="(item,index) in orderData" :key="item.order_id" @click="toOrderBtn(item.order_id)" class="order-item">
					<view class="order-tit">
						<view class="order-id">订单编号：{{item.order_sn}}</view>
						<view v-if="item.refundstatus" class="order-state">{{REFUND_TYPE.getName(item.refundstatus)}}</view>
						<view v-else class="order-state">{{(item.express_type==2&&item.status==1)?'待提货':MARKET_EASY.getName(item.status)}}</view>
						<!-- <view  class="order-state">{{MARKET_EASY.getName(item.status)}}</view> -->
					</view>
					
					<view v-for="(item1,index1) in item.order_goods" :key="item1.goods_id" class="order-box">
						<view class="-box-left">
							<view class="-box-img">
								<image :src="imgUrl+item1.goods_image+'?'+num" mode="aspectFit"></image>
							</view>
							<view class="-box-main">
								<view class="-main-text">{{item1.goods_name}}</view>
								<view class="-main-time">{{item1.goods_mode&&item1.goods_mode!='null'?item1.goods_model:'默认规格'}}</view>
							</view>
						</view>
						
						<view class="-box-right">
							<view class="price">￥{{item1.goods_price}}</view>
							<view class="num">x{{item1.goods_number}}</view>
						</view>
					</view>
					
					<view class="total">合计:￥{{item.pay_price}}</view>
					
					<!-- 未支付 -->
					<view v-if="item.status==0" class="btn-wrap">
						<!-- <view class="btn-item tel-btn">取消订单</view> -->
						
						<view class="btn-item">修改价格</view>
					</view>
					<view v-if="item.status==1&&item.express_type==1" class="btn-wrap">
						<view class="btn-item">发货</view>
					</view>
					<view v-if="item.status==1&&item.express_type==2" class="btn-wrap">
						<view class="btn-item">核销</view>
					</view>
					<!-- 待收货 -->
					<!-- <view v-if="item.status==2" class="btn-wrap">
						<view class="btn-item">查看物流</view>
					</view> -->
					
					<view v-if="item.status==3||item.status==4||item.status==5||item.status==8" class="btn-wrap">
						<view class="btn-item tel-btn">删除订单</view>
					</view>
					<view v-if="item.status==6&&item.refundstatus==1" class="btn-wrap">
						
						<view class="btn-item">处理</view>
					</view>
					<view v-if="item.status==6&&item.refundstatus==2" class="btn-wrap">
						<view class="btn-item">确认收货并退款</view>
					</view>
				</view>
				
				<!-- <view class="order-item">
					<view class="order-tit">
						<view class="order-id">订单编号：154756984125</view>
						
						<view class="order-state">待发货</view>
					</view>
					
					<view class="order-box">
						<view class="-box-left">
							<view class="-box-img">
								<image src="../../static/images/tu01.png"></image>
							</view>
							<view class="-box-main">
								<view class="-main-text">一汽-大众CC 2013款 1.8TS1尊贵型一汽-大众</view>
								<view class="-main-time">标配</view>
							</view>
						</view>
						
						<view class="-box-right">
							<view class="price">￥200.00</view>
							<view class="num">x2</view>
						</view>
					</view>
					
					<view class="total">合计:￥400.00</view>
					
					<view class="btn-wrap">
						<view class="btn-item tel-btn" @click="logistics">查看物流</view>
						
						<view class="btn-item">确认收货</view>
					</view>
				</view>
				
				<view class="order-item">
					<view class="order-tit">
						<view class="order-id">订单编号：154756984125</view>
						
						<view class="order-state">待自提</view>
					</view>
					
					<view class="order-box">
						<view class="-box-left">
							<view class="-box-img">
								<image src="../../static/images/tu01.png"></image>
							</view>
							<view class="-box-main">
								<view class="-main-text">一汽-大众CC 2013款 1.8TS1尊贵型一汽-大众</view>
								<view class="-main-time">标配</view>
							</view>
						</view>
						
						<view class="-box-right">
							<view class="price">￥200.00</view>
							<view class="num">x2</view>
						</view>
					</view>
					
					<view class="total">合计:￥400.00</view>
					
					<view class="btn-wrap">
						<view class="btn-item tel-btn">联系客服</view>
						
						<view class="btn-item tel-btn">确认收货</view>
						
						<navigator url="./theCode">
							<view class="btn-item">查看自提码</view>
						</navigator>
					</view>
				</view>
				
				<view class="order-item">
					<view class="order-tit">
						<view class="order-id">订单编号：154756984125</view>
						
						<view class="order-state">售后</view>
					</view>
					
					<view class="order-box">
						<view class="-box-left">
							<view class="-box-img">
								<image src="../../static/images/tu01.png"></image>
							</view>
							<view class="-box-main">
								<view class="-main-text">一汽-大众CC 2013款 1.8TS1尊贵型一汽-大众</view>
								<view class="-main-time">标配</view>
							</view>
						</view>
						
						<view class="-box-right">
							<view class="price">￥200.00</view>
							<view class="num">x2</view>
						</view>
					</view>
					
					<view class="total">合计:￥400.00</view>
					
					<view class="btn-wrap">
						<view class="btn-item tel-btn">查看物流</view>
						
						<view class="btn-item tel-btn">联系客服</view>
						
						<navigator url="./schedule">
							<view class="btn-item">售后进度</view>
						</navigator>
					</view>
				</view>
				
				<view class="order-item">
					<view class="order-tit">
						<view class="order-id">订单编号：154756984125</view>
						
						<view class="order-state">已完成</view>
					</view>
					
					<view class="order-box">
						<view class="-box-left">
							<view class="-box-img">
								<image src="../../static/images/tu01.png"></image>
							</view>
							<view class="-box-main">
								<view class="-main-text">一汽-大众CC 2013款 1.8TS1尊贵型一汽-大众</view>
								<view class="-main-time">标配</view>
							</view>
						</view>
						
						<view class="-box-right">
							<view class="price">￥200.00</view>
							<view class="num">x2</view>
						</view>
					</view>
					
					<view class="total">合计:￥400.00</view>
					
					<view class="btn-wrap">
						<view class="btn-item tel-btn">查看物流</view>
						
						<view class="btn-item tel-btn">联系客服</view>
						
						<navigator url="afteSrales">
							<view class="btn-item">申请售后</view>
						</navigator>
					</view>
				</view> -->
			</view>
			
		</view>
		
		<view v-else class="is-more">
			暂无更多数据~
		</view>
	</view>
</template>

<script>
	import { MARKET_EASY,REFUND_TYPE } from '../../utils/enum.js'
	export default {
		data() {
			return {
				list: [
					{cate_name: '全部'},
					{cate_name: '待付款'},
					{cate_name: '待发货'},
					{cate_name: '待收货'},
					{cate_name: '已完成'},
					{cate_name: '售后/退换'}
				],
				current: 0,
				typeNum:'',
				orderData:null,//订单列表
				MARKET_EASY,
				REFUND_TYPE,
				imgUrl:'',
				num:Math.random(),
				isMore:true,
				page:1
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.page = 1
			if(uni.getStorageSync('isType')){
				this.imgUrl = this.api.imgUrl
				this.current = 2
				this.getOrderList(uni.getStorageSync('isType'),1) 
				uni.removeStorageSync('isType')
			}else{
				this.imgUrl = this.api.imgUrl
				this.getOrderList(this.typeNum,1) 
			}
		},
		onReachBottom(){
			console.log(2222)
			if(this.isMore){
				this.page=this.page+1
				this.getOrderList(this.typeNum,this.page)
			}
		},
		methods: {
			// 查看详情
			toOrderBtn(id){
				console.log(22222)
				uni.navigateTo({
					url:'./orderDetails?id='+id
				})
			},
			change(index) {
				if(this.current != index){
					this.current = index
					if(index==0){
						this.typeNum=''
					}else if(index==1){
						this.typeNum=0
					}else if(index==2){
						this.typeNum=1
					}else if(index==3){
						this.typeNum=2
					}else if(index==4){
						this.typeNum=5
					}else if(index==5){
						this.typeNum = 6
					}
					this.page = 1
					this.orderData=null
					this.getOrderList(this.typeNum,1)
					
				}
			},
			getOrderList(status,page){
				this.api._post('Order/orderList',{
					status,
					page,
					size:10
				}).then(res=>{
					console.log(res)
					if(res.data){
						if(res.data.length>9){
							this.isMore=true
						}else{
							this.isMore=false
						}
						if(page==1){
							this.orderData = res.data
						}else{
							res.data.forEach((item,index)=>{
								this.orderData.push(item)
							})
						}
					}
					
				})
			}
			
		}
	}
</script>

<style lang="scss">
	@import url('../../common/common.css');
	
	page {
		background: #f6f6f6;
	}
	
	.wrapper {
		padding-top: 100upx;
		box-sizing: border-box;
		// position: absolute;
		// top: 0;
		// left: 0;
		// display: flex;
		// flex-direction: column;
		// width: 100%;
		// height: 100%;
	}
	.tab-head {
		width: 100%;
		height: 100upx;
		box-sizing: border-box;
		padding: 0 10upx;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	
	.content {
		padding: 20upx 20upx 100upx;
		flex:1;
		width: 100%;
		// overflow-y: scroll;
		box-sizing: border-box;
	}
	
	.order-item {
		margin-bottom: 20upx;
		padding: 20upx;
		background: #fff;
		border-radius: 6upx;
		.order-tit {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24upx;
			line-height: 75upx;
			.order-id {
				color: #333;
			}
			.order-state {
				color: #f70000;
			}
		}
		.order-box {
			display: flex;
			align-items: end;
			justify-content: space-between;
			.-box-left {
				display: flex;
				align-items: end;
				.-box-img {
					margin-right: 20upx;
					width: 200upx;
					height: 200upx;
					border-radius: 6upx;
					image {
						border-radius: 6upx;
					}
				}
				.-box-main {
					width: 50%;
					.-main-text {
						font-size: 28upx;
						line-height: 40upx;
						color: #333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.-main-time {
						font-size: 24upx;
						line-height: 55upx;
						color: #999;
					}
				}
			}
			.price {
				font-size: 28upx;
				line-height: 45upx;
				color: #333;
			}
			.num {
				font-size: 28upx;
				text-align: right;
				line-height: 45upx;
				color: #999;
			}
		}
		.total {
			font-size: 28upx;
			text-align: right;
			line-height: 65upx;
			color: #333;
		}
		.btn-wrap {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.btn-item {
				padding: 10upx 30upx;
				// width: 180upx;
				// height: 60upx;
				border-radius: 30upx;
				border: 1px solid #f70000;
				font-size: 28upx;
				text-align: center;
				// line-height: 60upx;
				letter-spacing: 1px;
				color: #f70000;
			}
			.tel-btn {
				margin-right: 20upx;
				color: #666;
				border-color: #999;
			}
		}
	}
	
	.is-more{
		padding-top: 50upx;
		text-align: center;
		font-size: 28upx;
		color: #B2B2B2;
	}
	
</style>
